<style scoped>
.split {
    height: 600px;
    background: #ffffff;
    border: 1px solid #dcdee2;
}

.split-pane {
    padding: 10px;
}
</style>
<template>
    <div class="split">
        <Card style="margin-bottom: 10px">
            <Form inline class="form-search">
                <FormItem>
                    <Input v-model="keyword" placeholder="名称" style="width: 200px" />
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="
                        page = 1;
                    SearchProduct();
                    " icon="md-search">查询</Button>
                </FormItem>
                <!-- <FormItem>

                            <Button type="primary" @click="AddData" icon="md-add">新增</Button>
                        </FormItem>-->
                <FormItem style="float:right">
                    <Button type="primary" @click="choseData" icon="md-document">确定</Button>
                </FormItem>
            </Form>
        </Card>
        <Table ref="table" style="margin-bottom: 10px" border :loading="loadingTable" :columns="tableTitle"
            :data="tableData" :height="tableHeight" @on-selection-change="selectionChange"></Table>
        <Page :total="total" :current="page" :page-size="size" :page-size-opts="[10]"
            @on-change="(s) => { page = s; SearchProduct(); }"
            @on-page-size-change="(p) => { size = p; page = 1; SearchProduct(); }" show-total show-sizer />

        <Modal :width="600" v-model="modalData" :title="tempData.Id > 0 ? '修改' : '新增'" :mask-closable="false" draggable
            sticky>
            <Form ref="formValidate" :model="tempData" :label-width="70" :rules="ruleValidate">
                <!-- <FormItem label="类别" prop="TypeId">
                            <treeselect v-model="tempData.TypeId" :searchable="false" placeholder :clearable="false"
                                :options="selectTreeData" />
                        </FormItem> -->
                <Row>
                    <Col span="12">
                    <FormItem label="名称" prop="Name">
                        <Input v-model="tempData.Name" />
                    </FormItem>
                    </Col>
                    <Col span="12">
                    <FormItem label="编码" prop="Code">
                        <Input v-model="tempData.Code" />
                    </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span="12">
                    <FormItem label="价格" prop="Price">
                        <Input type="number" v-model="tempData.Price" />
                    </FormItem>
                    </Col>
                    <Col span="12">
                    <FormItem label="单位" prop="Unit">
                        <AutoComplete v-model="tempData.Unit" :data="unitList" placeholder style="width:200px">
                        </AutoComplete>
                    </FormItem>
                    </Col>
                </Row>
                <FormItem label="规格" prop="Specification">
                    <Input type="textarea" v-model="tempData.Specification" />
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="text" @click="modalData = false">取消</Button>
                <Button type="primary" :loading="loading" @click="SaveData">确定</Button>
            </div>
        </Modal>
    </div>
</template>

<script>

import { SearchProduct, GetTreeProductType, DeleteProduct, SaveProduct, SearchUnit } from '@/api/product'
// import the component
import Treeselect from '@riophae/vue-treeselect'
// import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { InitProductTypeTree } from '@/libs/tools'
export default {
    name: 'productchose',
    components: {
        Treeselect
    },
    props: ['type'],
    data() {
        return {
            split1: 0,
            total: 0,
            page: 1,
            size: 10,
            tableHeight: 450,
            keyword: '',
            typeid: 0,
            ruleValidate: {
                Name: [
                    {
                        required: true,
                        message: '不能为空',
                        trigger: 'blur'
                    }
                ]
            },
            loading: false,
            loadingTable: false,
            modalData: false,
            tempData: {
            },
            typeList: [],
            treeData: [],
            selectTreeData: [],
            tableTitle: [
                {
                    type: 'index',
                    title: '序号',
                    align: 'center',
                    fixed: 'left',
                    width: 60,
                    // render: (h, params) => {
                    //     return h('span', params.index + (this.page - 1) * this.size + 1)
                    // }
                    indexMethod: (params) => {
                        return params._index + (this.page - 1) * this.size + 1;
                    }
                },
                {
                    type: 'selection',
                    width: 60,
                    align: 'center',
                    fixed: 'left',
                },
                {
                    key: 'Name',
                    title: '名称',
                    minWidth: 200,
                    resizable: true,
                    align: 'center',
                },
                {
                    key: 'Formulations',
                    title: '剂型',
                    minWidth: 200,
                    resizable: true,
                    align: 'center'
                },
                {
                    key: 'Specification',
                    title: '规格',
                    minWidth: 200,
                    resizable: true,
                    align: 'center'
                },
                {
                    key: 'ExpirationDate',
                    title: '有效期至',
                    minWidth: 200,
                    resizable: true,
                    align: 'center',
                    render: (h, params) => {
                        return h('span', {}, this.dayjs(params.row.ExpirationDate).format('YYYY-MM-DD'))
                    }
                },
                {
                    key: this.type == 1 ? 'Price' : 'Price',
                    title: this.type == 1 ? '单价' : '单价',
                    width: 100,
                    resizable: true,
                    align: 'center'
                },
                {
                    key: 'Unit',
                    title: '单位',
                    minWidth: 100,
                    resizable: true,
                    align: 'center'
                },
                {
                    key: 'Num',
                    title: '库存',
                    minWidth: 100,
                    resizable: true,
                    align: 'center',
                    render: (h, params) => {
                        if (params.row.Num <= 5) {
                            return h(
                                "span", { style: { color: "red", fontWeight: "bold" } }, params.row.Num
                            );
                        } else {
                            return h("span", {}, params.row.Num);
                        }
                    }
                },

            ],
            tableData: [],
            unitList: [],
            selectedData: []
        }
    },
    computed: {},
    methods: {
        changeTree(a, b) {
            this.typeid = b.id
            this.SearchProduct()
        },
        selectionChange(val) {
            var currentIds = this.tableData.map(item => { return item.Id })
            this.selectedData = this.selectedData.filter(item => {
                return currentIds.indexOf(item.Id) < 0
            })
            this.selectedData = this.selectedData.concat(val)
        },
        SaveData() {
            let vm = this
            vm.$refs['formValidate'].validate((valid) => {
                if (valid) {
                    vm.loading = true
                    SaveProduct(vm.tempData).then((res) => {
                        vm.loading = false
                        const data = res.data
                        if (data.StatusCode == 200) {
                            vm.modalData = false
                            vm.$Message.success({ title: '提示', content: '保存成功' })
                            vm.SearchProduct()
                            vm.SearchUnit()
                        } else {
                            vm.$Message.error({ title: '提示', content: data.Errors })
                        }
                    })
                }
            })
        },
        SearchProduct() {
            let vm = this
            vm.loadingTable = true
            var reqData = {
                keyword: vm.keyword,
                typeid: vm.typeid,
                page: vm.page,
                size: vm.size,
            }
            SearchProduct(reqData).then((res) => {
                vm.loadingTable = false
                var data = res.data
                if (data.StatusCode == 200) {
                    vm.tableData = data.Data.Items
                    vm.tableData.forEach(e => {
                        e._checked = false
                        vm.selectedData.forEach(s => {
                            if (s.Id == e.Id) {
                                e._checked = true
                            }
                        })
                    })
                    vm.total = data.Data.TotalCount
                } else {
                    vm.$Notice.error({
                        title: data.Errors
                    })
                }
            })
        },
        GetTreeProductType() {
            let vm = this
            GetTreeProductType(0).then((res) => {
                const data = res.data
                if (data.StatusCode == 200) {
                    this.selectTreeData = InitProductTypeTree(data.Data)
                    this.treeData = [
                        {
                            id: 0,
                            label: '全部',
                            title: '全部',
                            value: 0,
                            expand: true,
                            children: this.selectTreeData
                        }

                    ]
                } else {
                    vm.$Message.error({ title: '提示', content: data.Errors })
                }
            })
        },
        DeleteProduct(id) {
            this.$Modal.confirm({
                title: '提示',
                content: '确定要删除吗？',
                onOk: () => {
                    DeleteProduct(id).then((res) => {
                        const data = res.data
                        if (data.StatusCode == 200) {
                            this.SearchProduct()
                            this.$Message.success({ title: '提示', content: '删除成功' })
                        } else {
                            this.$Message.error({ title: '提示', content: data.Errors })
                        }
                    })
                },
                onCancel: () => { }
            })
        },
        SearchUnit() {
            let vm = this
            var reqData = {

            }
            SearchUnit(reqData).then((res) => {
                vm.loadingTable = false
                var data = res.data
                if (data.StatusCode == 200) {
                    vm.unitList = data.Data.map(m => { return m.Name })
                } else {
                    vm.$Notice.error({
                        title: data.Errors
                    })
                }
            })
        },

        AddData() {
            this.tempData = {

            }
            this.modalData = true
        },
        choseData() {
            this.$emit('on-success', this.selectedData)
        }
    },

    mounted() {
        //this.GetTreeProductType()
        this.SearchProduct()
        this.SearchUnit()
    }
}
</script>
